<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增机器人参数配置')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-account-add" th:object="${ccLlmAgentAccount}">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.name}"></label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" required type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.providerClassName}"></label>
                <div class="col-sm-8">
                    <select name="providerClassName" class="form-control" required id="providerClassNameSelect">
                        <!-- 选项将通过 JavaScript 动态填充 -->
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12" id="dynamicFieldsContainer">
            <!-- 动态字段将在这里显示 -->
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.interruptFlag}"></label>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input type="radio" name="interruptFlag" value="1" onclick="toggleInterruptFields(true)" th:field="*{interruptFlag}" th:text="#{llmAcount.form.interruptFlag1}">
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="interruptFlag" value="0" onclick="toggleInterruptFields(false)" th:field="*{interruptFlag}" th:text="#{llmAcount.form.interruptFlag0}">
                    </label>
                </div>
            </div>
        </div>
        <div class="col-xs-12" id="interruptKeywordsContainer" style="display: none;">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.interruptKeywords}"></label>
                <div class="col-sm-8">
                    <textarea name="interruptKeywords" class="form-control" rows="5" th:field="*{interruptKeywords}"></textarea>
                </div>
            </div>
        </div>
        <div class="col-xs-12" id="interruptIgnoreKeywordsContainer" style="display: none;">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.interruptIgnoreKeywords}"></label>
                <div class="col-sm-8">
                    <textarea name="interruptIgnoreKeywords" class="form-control" rows="5" th:field="*{interruptIgnoreKeywords}"></textarea>
                </div>
            </div>
        </div>
        <div class="col-xs-12" id="intentionTipsContainer" >
            <div class="form-group">
                <label class="col-sm-3 control-label" th:text="#{llmAcount.form.intentionTips}"></label>
                <div class="col-sm-8">
                    <textarea name="intentionTips" class="form-control" rows="5" th:field="*{intentionTips}"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "aicall/account"
    var _interruptFlag = [[${ccLlmAgentAccount.interruptFlag}]];
    var _accountJson = {};
    var _dynamicFieldsDiv = initDynamicFieldsDiv(_accountJson);

    $(document).ready(function() {
        // 获取实现类下拉框数据
        $.ajax({
            url: ctx + "aicall/provider/all", // 接口地址
            type: "GET",
            success: function(response) {
                // 假设返回的数据是一个数组，例如：[{providerClassName: "Provider1"}, {providerClassName: "Provider2"}]
                var providers = response.data;
                var select = $("#providerClassNameSelect");
                select.empty(); // 清空之前的选项
                providers.forEach(function(provider) {
                    select.append($("<option>", {
                        value: provider.providerClassName,
                        text: provider.providerClassName
                    }));
                });

                // 初始化动态字段
                updateDynamicFields(select.val());
            },
            error: function(xhr, status, error) {
                console.error("获取实现类数据失败:", error);
            }
        });

        // 监听下拉框变化
        $("#providerClassNameSelect").change(function() {
            updateDynamicFields($(this).val());
        });
        if (_interruptFlag) {
            toggleInterruptFields(true);
        } else {
            toggleInterruptFields(false);
        }
    });

    // 根据选择的实现类动态更新表单字段
    function updateDynamicFields(providerClassName) {
        var container = $("#dynamicFieldsContainer");
        container.empty(); // 清空之前的动态字段

        $("#intentionTipsContainer").hide(); // 客户意向提示词默认隐藏

        if (["DeepSeekChat", "ChatGpt4o", "JiutianLlm"].includes(providerClassName)) {
            // 显示serverUrl、apiKey、modelName、
            // llmTips、faqContext、transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
            container.append(_dynamicFieldsDiv["serverUrl"]);
            container.append(_dynamicFieldsDiv["apiKey"]);
            container.append(_dynamicFieldsDiv["modelName"]);
            container.append(_dynamicFieldsDiv["llmTips"]);
            container.append(_dynamicFieldsDiv["faqContext"]);
            container.append(_dynamicFieldsDiv["transferToAgentTips"]);
            container.append(_dynamicFieldsDiv["hangupTips"]);
            container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
            container.append(_dynamicFieldsDiv["openingRemarks"]);

            // intentionTipsContainer
            $("#intentionTipsContainer").show();
        }
        if (["Coze"].includes(providerClassName)) {
            // 显示 serverUrl、botId、tokenType、tokenTypeFields、
            // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
            container.append(_dynamicFieldsDiv["serverUrl"]);
            container.append(_dynamicFieldsDiv["botId"]);
            container.append(_dynamicFieldsDiv["tokenType"]);
            container.append(_dynamicFieldsDiv["tokenTypeFields"]);
            container.append(_dynamicFieldsDiv["transferToAgentTips"]);
            container.append(_dynamicFieldsDiv["hangupTips"]);
            container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
            container.append(_dynamicFieldsDiv["openingRemarks"]);

            // 监听 tokenType 下拉框变化
            $("#tokenTypeSelect").change(function() {
                var selectedTokenType = $(this).val();
                updateTokenTypeSelect(selectedTokenType);
            });

            var selectedTokenType = $("#tokenTypeSelect").val();
            updateTokenTypeSelect(selectedTokenType);
        }
        if (["MaxKB"].includes(providerClassName)) {
            // 显示serverUrl、apiKey、
            // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
            container.append(_dynamicFieldsDiv["serverUrl"]);
            container.append(_dynamicFieldsDiv["apiKey"]);
            container.append(_dynamicFieldsDiv["transferToAgentTips"]);
            container.append(_dynamicFieldsDiv["hangupTips"]);
            container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
            container.append(_dynamicFieldsDiv["openingRemarks"]);
        }
        if (["Dify"].includes(providerClassName)) {
            // 显示serverUrl、apiKey、
            // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
            container.append(_dynamicFieldsDiv["serverUrl"]);
            container.append(_dynamicFieldsDiv["apiKey"]);
            container.append(_dynamicFieldsDiv["transferToAgentTips"]);
            container.append(_dynamicFieldsDiv["hangupTips"]);
            container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
            container.append(_dynamicFieldsDiv["openingRemarks"]);
        }
        if (["JiutianWorkflow"].includes(providerClassName)) {
            // 显示serverUrl、apiKey、
            // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
            container.append(_dynamicFieldsDiv["serverUrl"]);
            container.append(_dynamicFieldsDiv["apiKey"]);
            container.append(_dynamicFieldsDiv["botId"]);
            container.append(_dynamicFieldsDiv["transferToAgentTips"]);
            container.append(_dynamicFieldsDiv["hangupTips"]);
            container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
            container.append(_dynamicFieldsDiv["openingRemarks"]);
        }
    }

    function updateTokenTypeSelect(selectedTokenType){
        console.log(selectedTokenType)
        if (selectedTokenType === "oauth") {
            $(".oauthFields").show();
            $(".patFields").hide();
        } else if (selectedTokenType === "pat") {
            $(".patFields").show();
            $(".oauthFields").hide();
        }
    }

    $("#form-account-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($("#form-account-add").valid()) {
            // 收集动态字段
            var dynamicFields = {};
            $("#dynamicFieldsContainer").find("input, textarea, select").each(function() {
                var fieldName = $(this).attr("name");
                var fieldValue = $(this).val();
                if (fieldValue === undefined || fieldValue === null) {
                    fieldValue = ""; // 如果未填写值，则传递空字符串
                }
                dynamicFields[fieldName] = fieldValue;
            });
            // 将 JSON 字符串添加到表单数据中
            var formData = $('#form-account-add').serializeArray();
            formData.push({"name": "accountJson", "value": JSON.stringify(dynamicFields)})
            $.operate.save(prefix + "/add", formData);
        }
    }

    function toggleInterruptFields(show) {
        if (show) {
            document.getElementById('interruptKeywordsContainer').style.display = 'block';
            document.getElementById('interruptIgnoreKeywordsContainer').style.display = 'block';
        } else {
            document.getElementById('interruptKeywordsContainer').style.display = 'none';
            document.getElementById('interruptIgnoreKeywordsContainer').style.display = 'none';
        }
    }

    function initDynamicFieldsDiv(_accountJson){
        let dynamicFieldsDiv = {};
        // serverUrl
        dynamicFieldsDiv["serverUrl"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.serverUrl")}</label>
                <div class="col-sm-8">
                    <input name="serverUrl" value="${_accountJson.serverUrl || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

        // apiKey
        dynamicFieldsDiv["apiKey"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.apiKey")}</label>
                <div class="col-sm-8">
                    <input name="apiKey" value="${_accountJson.apiKey || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

        // modelName
        dynamicFieldsDiv["modelName"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.modelName")}</label>
                <div class="col-sm-8">
                    <input name="modelName" value="${_accountJson.modelName || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

        // botId
        dynamicFieldsDiv["botId"] = `<div class="form-group">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.botId")}</label>
                    <div class="col-sm-8">
                        <input name="botId" class="form-control" type="text" required>
                    </div>
                </div>`;

        // tokenType
        dynamicFieldsDiv["tokenType"] = `
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.tokenType")}</label>
                    <div class="col-sm-8">
                        <select name="tokenType" class="form-control" required id="tokenTypeSelect">
                            <option value="oauth">oauth</option>
                            <option value="pat">pat</option>
                        </select>
                    </div>
                </div>`;

        // tokenTypeFields
        dynamicFieldsDiv["tokenTypeFields"] = `
                <div id="tokenTypeFields">
                    <div class="form-group oauthFields" style="display:none;">
                        <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthClientId")}</label>
                        <div class="col-sm-8">
                            <input name="oauthClientId" class="form-control" type="text" required>
                        </div>
                    </div>
                    <div class="form-group oauthFields" style="display:none;">
                        <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthPrivateKey")}</label>
                        <div class="col-sm-8">
                            <input name="oauthPrivateKey" class="form-control" type="text" required>
                        </div>
                    </div>
                    <div class="form-group oauthFields" style="display:none;">
                        <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthPublicKeyId")}</label>
                        <div class="col-sm-8">
                            <input name="oauthPublicKeyId" class="form-control" type="text" required>
                        </div>
                    </div>
                    <div class="form-group patFields" style="display:none;">
                        <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.patToken")}</label>
                        <div class="col-sm-8">
                            <textarea name="patToken" class="form-control" rows="3" required></textarea>
                        </div>
                    </div>
                </div>`;

        // llmTips
        dynamicFieldsDiv["llmTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.llmTips")}</label>
                <div class="col-sm-8">
                    <textarea name="llmTips" class="form-control" rows="30" required>${_accountJson.llmTips || ''}</textarea>
                </div>
            </div>`;

        // faqContext
        dynamicFieldsDiv["faqContext"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.faqContext")}</label>
                <div class="col-sm-8">
                    <textarea name="faqContext" class="form-control" rows="30" required>${_accountJson.faqContext || ''}</textarea>
                </div>
            </div>`;

        // transferToAgentTips
        dynamicFieldsDiv["transferToAgentTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.transferToAgentTips")}</label>
                <div class="col-sm-8">
                    <textarea name="transferToAgentTips" class="form-control" rows="3" required>${_accountJson.transferToAgentTips || ''}</textarea>
                </div>
            </div>`;

        // hangupTips
        dynamicFieldsDiv["hangupTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.hangupTips")}</label>
                <div class="col-sm-8">
                    <textarea name="hangupTips" class="form-control" rows="3" required>${_accountJson.hangupTips || ''}</textarea>
                </div>
            </div>`;

        // customerNoVoiceTips
        dynamicFieldsDiv["customerNoVoiceTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.customerNoVoiceTips")}</label>
                <div class="col-sm-8">
                    <textarea name="customerNoVoiceTips" class="form-control" rows="3" required>${_accountJson.customerNoVoiceTips || ''}</textarea>
                </div>
            </div>`;

        // openingRemarks
        dynamicFieldsDiv["openingRemarks"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.openingRemarks")}</label>
                <div class="col-sm-8">
                    <textarea name="openingRemarks" class="form-control" rows="3" required>${_accountJson.openingRemarks || ''}</textarea>
                </div>
            </div>`;

        return dynamicFieldsDiv;

    }

</script>
</body>
</html>